<template>
    <div class="pages">
        <van-sticky>
            <div class="header">
                <div class="fls" @click="$router.back(-1)">
                    <img src="../../../static/images/icon-back.png" alt="">
                </div>
                <div class="centern">银行卡管理</div>
                <div class="fls"></div>
            </div>
        </van-sticky>

        <van-swipe-cell  v-for="(item,index) in bank" :key="index" v-if="bank != '' ">
            <!-- 选择银行卡 -->
            <div class="bank_card">
                <div class="bank_left">
                    <div class="bank_icon">
                        <!-- <img src="../../../static/images/icon-gsyh.png" alt=""> -->
                    </div>
                    <div class="bankinfo">
                        <div class="bank_xinxi">{{item.cardNoMask}}</div>
                        <div class="bank_name">{{userinfoing.agency.agtMercNm}}</div>
                    </div>
                </div>
                <div class="bank_righr">
          
                </div>
            </div>
            <template #right>
                <van-button @click="del(item.id)" square text="删除" type="danger" class="delete-button" />
            </template>
        </van-swipe-cell>

        <van-empty description="暂无银行卡" v-if="bank == '' ">

        </van-empty>

        <div class="niceckead">
            <van-button type="primary"  color="#3288FF"  @click="addBank()" block>添加银行卡</van-button>
            <!-- <div class="isok" @click="close()">确定</div> -->
        </div>
    </div>
</template>

<script>
import { Dialog } from 'vant'
import qs from 'qs';
import { Toast } from 'vant';


import Vue from 'vue'
import api from '../../api/PublicInterface'
Vue.prototype.$api = api
export default {
    beforeCreate () {
        document.querySelector('body').setAttribute('style', 'background:#f5f5f5')
    },
    data(){
        return{
            bank:[],
            userinfoing:{
                agency:{}
            },
        }
    },
    mounted(){
        this.bankcards();  //查询银行卡信息
        this.userinfo();  //获取用户信息接口
    },
    methods:{
        // 查询银行卡信息
        bankcards(){
            let data = {
                sort:'id,desc',
                page:this.page,
                size:999
            }
            this.$api.bankcards(data).then((res)=>{
                console.log(res)
                if(res.status == '0000'){
                    this.bank = res.payload
                }else{}
            })
        },

        // 获取用户信息接口
        userinfo(){
            this.$api.userinfo().then((res) =>{
                // console.log(res)
                if(res.status == '0000'){
                    this.userinfoing = res.payload;
                    // this.phone = res.payload.phoneNo.substr(0, 3) + '****' + res.payload.phoneNo.substr(7)
                }else{
                    Toast(res.describe);
                }
            })
        },

        del(id){
            Dialog.confirm({
                title: '提示',
                message: '是否删除改银行卡',
            })
            .then(() => {
                this.$api.deleete(id).then((res)=>{
                    console.log(res)
                    if(res.status == '0000'){
                        Toast('删除成功');
                        this.bankcards(); //查询银行卡信息
                    }else{
                        Toast(res.describe);
                    }
                })
                // on confirm
            })
            .catch(() => {
                // on cancel
            });
        },
        addBank(){
            this.$router.push({ name: "addBank" });
        }
    }
}
</script>

<style scoped>
    .pages{
        width: 100%;
    }
        .header{
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        box-sizing: border-box;
        background: #3288FF;
    }
    .header>.fls{
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .header>.fls>img{
        width: 100%;
        height: 100%;
    }
    .centern{
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 17px;
        letter-spacing: 0px;
    }

        .bank_card{
        width: 100%;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #FFFFFF;
        padding: 0 16px;
        box-sizing: border-box;
        margin-bottom: 16px;
    }

    .bank_card>.bank_left{
        display: flex;
        align-items: flex-start;
        width: 84%;
    }
    .bank_icon{
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .bank_icon>img{
        width: 100%;
        height: 100%;
    }
    .bankinfo{
        color: #333333;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 16px;
        letter-spacing: 0px;
        margin-left: 16px;
    }
    .bank_name{
        margin-top: 4px;
    }

    .bank_card>.bank_righr{
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .bank_card>.bank_righr>img{
        width: 100%;
        height: 100%;
    }


    .niceckead{
        width: 100%;
        margin-top: 40px;
        padding: 0 16px;
        box-sizing: border-box;
    }
    .isok{
        width: 100%;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        background: #3288FF;
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 16px;
        letter-spacing: 0px;
    }


    .goods-card {
        margin: 0;
        background-color: #fff;
    }

    .delete-button {
        height: 100%;
    }
</style>